<!-- 引用编辑器 -->
<link rel="stylesheet" href="/static/kindeditor/themes/default/default.css" />
<script src="/static/kindeditor/kindeditor-all.js"></script>
<script src="/static/kindeditor/lang/zh-CN.js"></script>
<style>
    .layui-elem-field legend {
        margin-left: 0px;
    }
</style>

<div class="layui-hide-xs">
    <div class="fly-panel fly-column">
        <div class="layui-container">
            <ul class="layui-clear">
                <li class="layui-hide-xs"><a href="{:url('/')}">首页</a></li>
                {foreach $CateList as $item}
                <li class="{$cateid == $item.id ? 'layui-this' : ''}">
                    <a
                        href="{:url('home/index/index',['cateid' => $item.id,'accept' => $accept,'state' => $state])}">{$item.name}</a>
                </li>
                {/foreach}
                <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>

                <!-- 用户登入后显示 -->
                {if condition="$LoginUser"}
                <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block">
                    <a href="user/index.html">我发表的贴</a>
                </li>
                <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block">
                    <a href="user/index.html#collection">我收藏的贴</a>
                </li>
                {/if}
            </ul>

            <div class="fly-column-right layui-hide-xs">
                <span class="fly-search"><i class="layui-icon"></i></span>
                <a href="{:url('home/post/add')}" class="layui-btn">发表新帖</a>
            </div>
            <div class="layui-hide-sm layui-show-xs-block"
                style="margin-top: -10px; padding-bottom: 10px; text-align: center;">
                <a href="{:url('home/post/add')}" class="layui-btn">发表新帖</a>
            </div>
        </div>
    </div>
</div>

<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8 content detail">
            <div class="fly-panel detail-box">
                <h1>{$post.title}</h1>
                <div class="fly-detail-info">
                    <!-- <span class="layui-badge">审核中</span> -->
                    <span class="layui-badge layui-bg-green fly-detail-column">{$post.cate.name}</span>
                    {if condition="$post.accept > 0"}
                    <span class="layui-badge" style="background-color: #5FB878;">已结</span>
                    {else /}
                    <span class="layui-badge" style="background-color: #999;">未结</span>
                    {/if}
                    {if condition="$post.state == 1"}
                    <span class="layui-badge layui-bg-black">置顶</span>
                    {elseif condition="$post.state == 2"}
                    <span class="layui-badge layui-bg-red">热门</span>
                    {elseif condition="$post.state == 3"}
                    <span class="layui-badge layui-bg-orange">精华</span>
                    {/if}
                    <!-- <span class="layui-badge layui-bg-red">精帖</span> -->

                    <div class="fly-admin-box" data-id="123">
                        {php}$UserId = !empty($LoginUser["id"]) ? $LoginUser["id"] :
                        0;{/php}
                        {if condition="$post.userid == $UserId"}
                        <span class="layui-btn layui-btn-xs jie-admin del" data-id="{$post.id}" type="del">删除</span>
                        {/if}

                        {if condition="$post.userid != $UserId"}
                        {if condition="!empty($CollectId)"}
                        <span class="layui-btn layui-btn-xs jie-admin layui-bg-red uncollect" data-id="{$post.id}"
                            type="set" field="stick" rank="1">取消收藏</span>
                        {else /}
                        <span class="layui-btn layui-btn-xs jie-admin collect" data-id="{$post.id}" type="set"
                            field="stick" rank="1">收藏</span>
                        {/if}
                        <!-- <span class="layui-btn layui-btn-xs jie-admin" type="set" field="stick" rank="0" style="background-color:#ccc;">取消置顶</span> -->
                        {/if}
                        <!-- <span class="layui-btn layui-btn-xs jie-admin" type="set" field="status" rank="1">加精</span> -->
                        <!-- <span class="layui-btn layui-btn-xs jie-admin" type="set" field="status" rank="0" style="background-color:#ccc;">取消加精</span> -->
                    </div>
                    <span class="fly-list-nums">
                        <a href="#comment"><i class="iconfont" title="回答">&#xe60c;</i> {$post.comment_count}</a>
                        <i class="iconfont" title="人气">&#xe60b;</i> {$VisitCount}
                    </span>
                </div>
                <div class="detail-about">
                    <a class="fly-avatar" href="{:url('home/user/index',['userid' => $post.userid])}">
                        <img src="{$post.user.avatar_cdn}" alt="{$post.user.nickname}">
                    </a>
                    <div class="fly-detail-user">
                        <a href="{:url('home/user/index',['userid' => $post.userid])}" class="fly-link">
                            <cite>{$post.user.nickname}</cite>

                            {if condition="$post.user.auth"}
                            <i class="iconfont icon-renzheng" title="认证信息：{$post.user.nickname}"></i>
                            {else /}
                            <i class="iconfont icon-renzheng" title="未认证}"></i>
                            {/if}

                            <i class="layui-badge fly-badge-vip">VIP{$post.user.vip}</i>
                        </a>
                        <span>{$post.createtime}</span>
                    </div>
                    <div class="detail-hits" id="LAY_jieAdmin" data-id="123">
                        <span style="padding-right: 10px; color: #FF7200">悬赏：{$post.point}飞吻</span>
                        {if condition="$post.userid == $UserId && $post.accept == null"}
                        <span class="layui-btn layui-btn-xs jie-admin" type="edit"><a
                                href="{:url('home/post/edit',['postid' => $post.id])}">编辑此贴</a></span>
                        {/if}
                    </div>
                </div>
                <div class="detail-body photos">
                    {$post.content}
                </div>
            </div>

            <div class="fly-panel detail-box" id="flyReply">
                <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
                    <legend>回帖</legend>
                </fieldset>

                <ul class="jieda" id="jieda">
                    {if condition="$CommentList"}
                    {:CommentHtml($CommentList,$post,$LoginUser)}
                    {else /}
                    <li class="fly-none">消灭零回复</li>
                    {/if}
                    <!-- 无数据时 -->
                    <!-- <li class="fly-none">消灭零回复</li> -->
                </ul>

                {if condition="$LoginUser && $post.accept == null"}
                <div class="fly-link" id="reply" style="font-size: 20px;"></div>
                <div class="layui-form layui-form-pane">
                    <form method="post">
                        <div class="layui-form-item layui-form-text">
                            <a name="comment"></a>
                            <div class="layui-input-block">
                                <textarea name="content" id="content" style="height: 300px;width:100%;"></textarea>
                                <!-- <textarea id="L_content" name="content" required lay-verify="required"
                                    placeholder="请输入内容" class="layui-textarea fly-editor"
                                    style="height: 150px;"></textarea> -->
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <input type="hidden" name="postid" value="{$post.id}">
                            <input type="hidden" name="pid" value="0">
                            <button class="layui-btn btn-add" lay-submit>提交回复</button>
                        </div>
                    </form>
                </div>
                {/if}
            </div>
        </div>
        <div class="layui-col-md4">
            <dl class="fly-panel fly-list-one">
                <dt class="fly-panel-title">本周热议</dt>
                {if condition="$HotPostList"}
                {foreach $HotPostList as $item}
                <dd>
                    <a href="{:url('home/index/info',['postid' => $item.post.id])}">{$item.post.title}</a>
                    <span><i class="iconfont icon-pinglun1"></i>{$item.num}</span>
                </dd>
                {/foreach}
                <!-- 无数据时 -->
                {else /}
                <div class="fly-none">没有相关数据</div>
                {/if}

            </dl>

            <div class="fly-panel" style="padding: 20px 0; text-align: center;">
                <img src="/static/home/res/images/weixin.jpg" style="max-width: 100%;" alt="layui">
                <p style="position: relative; color: #666;">微信扫码联系 <span style="color: green;">社区鼻祖</span> 充值积分</p>
            </div>
        </div>
    </div>
</div>
<script>
    let editor;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]');
    })
    layui.use(['layer'], function () {
        let $ = layui.jquery,
            layer = layui.layer

        //评论删除ajxa
        $('.comment-del').click(function () {
            let comid = $(this).data('id');
            layer.confirm('确认删除帖子？', { icon: 3, title: '提示' }, function (index) {
                $.ajax({
                    type: 'post',
                    url: `{:url('home/comment/commentDel')}`,
                    data: {
                        comid,
                        action: 'commentDel'
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 1) {
                            layer.msg(res.msg, { icon: 1 }, function () {
                                location.reload();
                            })
                        } else {
                            layer.msg(res.msg, { icon: 5 })
                        }
                    }
                })
                layer.close(index)
            })
        })

        //点赞功能
        $('.jieda-zan').click(function () {
            let comid = $(this).data('id');
            let str2 = 'em[data-id=' + comid + ']';
            let str1 = '.jieda-zan[data-id=' + comid + ']';
            // let d = $('.jieda-zan').find(str).text();
            // console.log(d);
            $.ajax({
                type: 'post',
                url: `{:url('home/comment/like')}`,
                data: {
                    comid,
                    "userid": `{$UserId}`,
                    action: 'zan'
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 1) {
                        if (res.data[1] == 'unzan') {
                            $('.jieda-reply').find(str1).removeClass('zanok');
                            // $('.jieda-zan em').text(res.data[0]);
                            $('.jieda-zan').find(str2).text(res.data[0]);
                        }
                        if (res.data[1] == 'zan') {
                            $('.jieda-reply').find(str1).addClass('zanok');
                            $('.jieda-zan').find(str2).text(res.data[0]);
                            // $('.jieda-zan data-id="$}" em').text(res.data[0]);
                        }
                        layer.msg(res.msg, { icon: 1 }, function () {
                            // location.reload();
                        })
                    } else {
                        layer.msg(res.msg, { icon: 5 })
                    }
                }
            })
        })

        //采纳
        $('.accept').click(function () {
            /* 
              1、获取评论id => 传给后台
              2、帖子id => 获取评论id => 后台查询
            */

            let comid = $(this).data('comid')

            $.ajax({
                type: 'post',
                url: `{:url('home/comment/accept')}`,
                data: {
                    comid,
                    action: 'accept'
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 1) {
                        layer.msg(res.msg, { icon: 1 }, function () {
                            location.reload();
                        })
                    } else {
                        layer.msg(res.msg, { icon: 5 })
                    }
                }
            })

        })

        //回复添加回复人昵称
        $('.reply').click(function () {
            let pid = $(this).data('pid');
            $('input[name="pid"]').val(pid);
            // console.log(pid);
            let nickname = $(this).data('nickname')
            let reply = '回复@' + nickname;
            $('#reply').html(reply);
            editor.focus();

        })

        $('.btn-add').click(function () {
            // 如果需要异步评论
            // 设置同步
            editor.sync();
            let pid = $('input[name="pid"]').val();
            let postid = $('input[name="postid"]').val();
            let content = $("#content").val();
            // console.log(content);
            $.ajax({
                type: 'post',
                url: `{:url('home/comment/add')}`,
                data: {
                    postid,
                    pid,
                    content,
                    action: 'add'
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 1) {
                        if (pid != 0) {
                            layer.msg('回复成功', { icon: 1 }, function (index) { })
                        } else {
                            layer.msg('评论成功', { icon: 1 }, function (index) { })
                        }

                    } else {
                        layer.msg(res.msg, { icon: 5 })
                    }
                }
            })
        })

        // let postid = $('.del').data('id')
        // console.log(postid);

        $('.del').click(function () {
            let postid = $(this).data('id')

            layer.confirm('确认删除帖子？', { icon: 3, title: '提示' }, function (index) {
                //发起请求
                $.ajax({
                    type: 'post',
                    url: `{:url('home/post/del')}`,
                    data: {
                        postid
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 1) {
                            layer.msg('删除成功', { icon: 1 }, function (index) {
                                location.href = res.url
                            })
                        } else {
                            layer.msg(res.msg, { icon: 5 })
                        }
                    }
                })

                layer.close(index)
            })
        })

        // let a = `{$UserId}`;
        // console.log(a);

        //收藏
        $('.fly-admin-box').on('click', '.collect', function () {
            let postid = $(this).data('id')

            //发起请求
            $.ajax({
                type: 'post',
                url: `{:url('home/post/collect')}`,
                data: {
                    postid,
                    "userid": `{$UserId}`,
                    action: "confirm"
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 1) {
                        $('.collect').addClass('layui-bg-red').text('取消收藏').addClass('uncollect').removeClass('collect')
                        // $('.collect').text('取消收藏');
                        // $('.collect').css({ 'background': "red" });
                        layer.msg(res.msg, { icon: 1 }, function (index) {
                            // location.href = res.url
                        })
                    } else {
                        layer.msg(res.msg, { icon: 5 })
                    }
                }
            })
        })

        //取消收藏
        $('.fly-admin-box').on('click', '.uncollect', function () {
            let postid = $(this).data('id')

            //发起请求
            $.ajax({
                type: 'post',
                url: `{:url('home/post/collect')}`,
                data: {
                    postid,
                    "userid": `{$UserId}`,
                    action: "cancel"
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 1) {
                        $('.uncollect').removeClass('layui-bg-red').text('收藏').addClass('collect').removeClass('uncollect')
                        // $('.uncollect').text('收藏');
                        // $('.uncollect').removeClass("layui-bg-red");
                        layer.msg(res.msg, { icon: 1 }, function (index) {
                            // location.href = res.url
                        })
                    } else {
                        layer.msg(res.msg, { icon: 5 })
                    }
                }
            })
        })
    })
</script>